<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录表单</title>
</head>
<body>
    <!-- 
        form 表单元素
        1.action 属性   设置表单提交的地址，一般设置后台接口地址
        2.method 属性   设置表单提交的方式
            2.1 GET方式：
                提交数据通过url地址发送，一般用于查询数据，默认方式；
                会将数据追加至地址栏上；
                一般不用来提交隐私数据；一般不用来提交数据量较大的；
                ?username=zhangsan&password=123456
            2.2 POST方式
                提交数据通过请求体发送；
                不会将暴露在url地址上；
                一般用于提交数据，提交隐私数据，提交数据量较大的；
    -->
    <form action="#" method="post">
        <table border="1px" cellspacing="0" cellpadding="10px" align="center">
            <tr>
                <td colspan="2" align="center"><h1>登录界面</h1></td>
            </tr>
            <tr>
                <td>
                    <fieldset>
                        <legend>必填项</legend>
                        姓名
                    </fieldset>
                </td>
                <td>
                    <!-- 
                        输入框 
                        1.type="text"    普通文本框 
                        2.placeholder="" 提示文本
                        3.name=""        当表单收集数据，必提供name属性
                    -->
                    <input type="text" class="username" placeholder="请输入姓名" name="username" />
                </td>
            
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                     <!-- 
                        密码框 
                        1.type="password"  密码框
                        2.placeholder=""   提示文本
                        3.name=""          当表单收集数据，必提供name属性
                    -->
                    <input type="password" class="password" placeholder="请输入密码" name="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <!-- 
                        type 指定submit，代表提交当前表单内容
                        type 指定reset， 代表重置当前表单内容
                    -->
                    <input type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>